<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>snake</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      ul,
      li {
        list-style-type: none;
        list-style: none;
      }

      /* --- */
      .holidays-title {
        font-family: "Mountains of Christmas", cursive;
        font-size: 3em;
        background: #fff;
        padding: 20px;
        border-radius: 20px;
        box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.14);
        position: relative;
        opacity: 0;
        animation: balloon 6s ease-in-out infinite;
        text-align:right;

      }

      .holidays-title::before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 0 solid transparent;
        border-top: 40px solid #fff;
        bottom: -31px;
        right: 33px;
        transform: rotateZ(-20deg);
      }

      .xm-wrapper {
        position: absolute;
        margin: 0;
        display: flex;
        height: inherit;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        bottom: -70px;
        left: -143px;

        display: none;
      }

      .tree-stalk,
      .tree-jar,
      .room-window::before,
      .room-window::after,
      .sc-head .nose,
      .sc-head .beard::before,
      .sc-head .ears,
      .sc-hat {
        display: table;
        margin: 0 auto;
      }

      .tie-wrap::before,
      .tie-wrap::after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border-left: 17px solid transparent;
        border-right: 0 solid transparent;
        border-bottom: 40px solid yellow;
        left: 21px;
        top: 5px;
      }

      .ground {
        background: rgba(0, 0, 0, 0.12);
        width: calc(100vw - 20%);
        height: 70px;
        border-radius: 50%;
        display: table;
      }

      .scene {
        max-width: calc(100vw - 30%);
        min-width: 640px;
        position: relative;
      }

      .xmas-tree {
        position: relative;
        top: 80px;
        float: left;
      }

      .tree-star {
        position: absolute;
        top: 0;
        left: 40%;
        z-index: 4;
      }

      .tree-star::before {
        content: "";
        position: absolute;
        bottom: -16px;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 25px solid #fcd000;
        box-shadow: 1px 19px 20px -7px #1d5022;
      }

      .tree-star::after {
        content: "";
        position: absolute;
        top: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 25px solid #fcd000;
      }

      .tree-part {
        width: 0;
        height: 0;
        border-left: 80px solid transparent;
        border-right: 80px solid transparent;
        border-bottom: 100px solid #49bd55;
        position: relative;
        z-index: 3;
      }

      .tree-part::before {
        content: "";
        position: absolute;
        width: 160px;
        background-repeat: repeat;
        height: 15px;
        background-size: 20px 20px;
        background-image: radial-gradient(circle at 10px 15px, #3fae4a 12px, rgba(0, 0, 0, 0) 13px);
        top: 99px;
        left: -80px;
        transform: rotateX(180deg);
      }

      .tree-part:nth-child(2) {
        border-bottom-color: #31883a;
        transform: scale(1.4);
        top: -45px;
        z-index: 2;
      }

      .tree-part:nth-child(2)::before {
        background-image: radial-gradient(circle at 10px 15px, #389b42 12px, rgba(0, 0, 0, 0) 13px);
      }

      .tree-part:nth-child(3) {
        border-bottom-color: #2b7532;
        transform: scale(1.8);
        top: -80px;
        z-index: 1;
      }

      .tree-part:nth-child(3)::before {
        background-image: radial-gradient(circle at 10px 15px, #31883a 12px, rgba(0, 0, 0, 0) 13px);
      }

      .tree-stalk {
        width: 25px;
        height: 75px;
        background: #7b652d;
        box-shadow: inset 0 22px 6px -1px #302812;
        position: relative;
        top: -40px;
      }

      .tree-jar {
        width: 80px;
        position: relative;
        top: -40px;
        left: 2px;
      }

      .tree-jar::before {
        content: "";
        width: 96px;
        height: 20px;
        float: left;
        background: #584444;
        box-shadow: 0 3px 2px -1px #4a3939;
        position: relative;
        border-radius: 2px;
        left: -3px;
      }

      .tree-jar::after {
        content: "";
        border-top: 50px solid #755a5a;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        height: 0;
        width: 50px;
        float: left;
      }

      .tree-lights {
        width: 120px;
        height: 20px;
        border-radius: 50%;
        box-shadow: 0 3px 0 -1px #000;
      }

      .tree-lights.left {
        transform: rotateZ(-20deg);
        position: relative;
        left: -73px;
        top: 41px;
      }

      .tree-lights.right {
        transform: rotateY(180deg) rotateZ(-20deg);
        position: relative;
        left: -43px;
        top: 31px;
      }

      .light-bulb {
        width: 8px;
        height: 3px;
        background: black;
        margin: 20px;
        border-radius: 20% 50%;
        position: absolute;
        animation: 1s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;
      }

      .light-bulb.red {
        background: #de3939;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 2px 6px 2px #de3939;
        transform: rotateZ(-73deg);
        top: 2px;
        left: -9px;
        animation-name: blink;
      }

      .light-bulb.yew {
        background: #69e622;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 2px 6px 2px #69e622;
        transform: rotateZ(-86deg);
        top: 6px;
        left: 20px;
        animation-name: blink2;
      }

      .light-bulb.purple {
        background: #9c6aff;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 2px 6px 2px #9c6aff;
        transform: rotateZ(-96deg);
        top: 6px;
        left: 50px;
        animation-name: blink3;
      }

      .light-bulb.blue {
        background: #0ebeff;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 2px 6px 2px #0ebeff;
        transform: rotateZ(-106deg);
        top: 3px;
        left: 75px;
        animation-name: blink4;
      }

      .room-window {
        width: 340px;
        height: 300px;
        border: 10px solid #ccaa53;
        box-shadow: 4px 5px 2px 0px rgba(182, 146, 54, 0.3);
        float: right;
        overflow: hidden;
        position: relative;
      }

      .room-window::before {
        content: "";
        background: #ccaa53;
        box-shadow: 1px 0 1px 1px #a28230;
        width: 10px;
        height: inherit;
        position: absolute;
        left: 48%;
        z-index: 1;
      }

      .room-window::after {
        content: "";
        background: #ccaa53;
        width: inherit;
        height: 10px;
        position: absolute;
        top: 48%;
        z-index: 1;
      }

      .room-window .xmas-sky {
        background: linear-gradient(0deg, #153d54, #061117);
        width: 100%;
        height: 100%;
        position: absolute;
      }

      .snow-ground {
        width: 455px;
        height: 105px;
        background: linear-gradient(0deg, #fff, #ccf0fd);
        border-radius: 40%;
        position: absolute;
        bottom: -44px;
        left: -24px;
        transform: rotateZ(-6deg);
      }

      .xmas-gifts {
        position: absolute;
        top: 220px;
    left: 176px;

      }

      .xmas-gift {
        border-radius: 4px;
      }

      .xmas-gift::before {
        content: "";
        width: 100%;
        height: 10px;
        background: yellow;
        box-shadow: -30px 0 0 0 #d6d600;
        display: block;
        position: relative;
        top: 35px;
      }

      .xmas-gift::after {
        content: "";
        width: 10px;
        height: inherit;
        background: yellow;
        display: block;
        position: relative;
        top: -10px;
        margin: auto;
      }

      .xmas-gift.square {
        width: 80px;
        height: 80px;
        background: #ff54cf;
        box-shadow: -30px 0 0 0 #ed00aa;
        position: relative;
        z-index: 1;
      }

      .xmas-gift.rectangular {
        width: 60px;
        height: 120px;
        background: #0ebeff;
        box-shadow: -30px 0 0 0 #008dc1;
        position: absolute;
        top: -50px;
        left: 100px;
      }

      .tie-wrap {
        position: absolute;
        top: -20px;
        left: -6px;
        min-width: 82px;
      }

      .tie-wrap .tie,
      .tie-wrap .tie::before {
        width: 40px;
        height: 20px;
        background: yellow;
        border-radius: 50% 50% 20% 20%;
        float: left;
        z-index: 1;
        position: relative;
      }

      .tie-wrap .tie::before {
        content: "";
        background: #cccc00;
        transform: scale(0.5) translateX(15px) translateY(8px);
      }

      .tie-wrap .tie.reflected,
      .tie-wrap .reflected.tie::before {
        transform: rotateY(180deg);
      }

      .tie-wrap .reflected.tie::before {
        transform: scale(0.5) translateX(2px) translateY(8px);
      }

      .tie-wrap::after {
        transform: rotateY(180deg);
        left: 54px;
      }

      .rectangular .tie-wrap {
        left: -16px;
      }

      .santa-claus {
        margin: 40px;
        animation: santa-claus 6s ease-in infinite;
      }

      .sc-head {
        width: 80px;
        height: 80px;
        border-radius: 40%;
        background: #f7caaf;
        position: relative;
        z-index: 2;
      }

      .sc-head .eyes {
        position: absolute;
        left: 2px;
        top: 20px;
        display: table;
        margin: 0 auto;
      }

      .sc-head .eyes::before,
      .sc-head .eyes::after {
        content: "";
        width: 8px;
        height: 8px;
        background: #000;
        border-radius: 50%;
        display: inline-block;
        margin: 0 15px;
      }

      .sc-head .nose {
        width: 20px;
        height: 13px;
        border-radius: 50%;
        background: #d48c7e;
        top: 32px;
        position: relative;
      }

      .sc-head .beard {
        position: absolute;
        bottom: -45px;
        left: -10px;
        background: #fff;
        width: calc(100% + 20px);
        height: 80px;
        border-radius: 20% 20% 60% 60%;
      }

      .sc-head .beard::before {
        content: "";
        width: 20px;
        height: 20px;
        background: #000;
        border-radius: 0 0 50% 50%;
        margin-top: 6px;
      }

      .sc-head .ears {
        width: calc(100% + 17px);
        position: absolute;
        top: 25px;
        left: -8px;
      }

      .sc-head .ears .ear {
        width: 10px;
        height: 20px;
        background: #d48c7e;
        border-radius: 50% 0 0 50%;
      }

      .sc-head .ears .ear.left {
        float: left;
      }

      .sc-head .ears .ear.right {
        float: right;
        transform: rotateZ(180deg);
      }

      .sc-hat {
        position: absolute;
        top: -37px;
        left: -6px;
        width: calc(100% + 10px);
        height: 55px;
        background: #de3939;
        border-radius: 60px 80px 0 0;
      }

      .sc-hat::before {
        content: "";
        width: inherit;
        height: 20px;
        background: #fff;
        display: block;
        border-radius: 6px;
        position: absolute;
        bottom: -5px;
        left: -4px;
      }

      .sc-hat .hat-tip {
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 69px solid #de3939;
        position: absolute;
        top: -37px;
        animation: swing 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
        left: 8px;
      }

      .sc-hat .hat-tip::before {
        content: "";
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        display: block;
        position: absolute;
        left: -13px;
        top: -10px;
      }

      .sc-body {
        position: absolute;
        left: -70px;
        width: 200px;
        height: 200px;
        background: #de3939;
        border-radius: 30%;
      }

      .snow,
      .snow:before,
      .snow:after {
        position: absolute;
        top: -600px;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: radial-gradient(4px 4px at 174px 199px, rgba(255, 255, 255, 0.6) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 422px 55px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 339px 185px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(4px 4px at 445px 146px, rgba(255, 255, 255, 0.6) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 549px 351px, #ffffff 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 183px 409px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(5px 5px at 434px 493px, rgba(255, 255, 255, 0.6) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 68px 485px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 71px 310px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(3px 3px at 397px 75px, #ffffff 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 51px 124px, #ffffff 70%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 520px 157px, rgba(255, 255, 255, 0.6) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(3px 3px at 523px 183px, #ffffff 70%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 9px 258px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 412px 347px, #ffffff 70%, rgba(0, 0, 0, 0)),
          radial-gradient(4px 4px at 23px 337px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 331px 470px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 515px 228px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(4px 4px at 105px 587px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 240px 37px, #ffffff 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 592px 424px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(5px 5px at 301px 136px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 471px 445px, #ffffff 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 54px 448px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(4px 4px at 495px 532px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 479px 373px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 40px 307px, #ffffff 70%, rgba(0, 0, 0, 0)),
          radial-gradient(4px 4px at 23px 145px, rgba(255, 255, 255, 0.6) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 468px 502px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 31px 37px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(5px 5px at 117px 208px, #ffffff 70%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 488px 384px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 167px 527px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(5px 5px at 105px 327px, rgba(255, 255, 255, 0.6) 70%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 286px 358px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 89px 414px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(3px 3px at 46px 125px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 215px 137px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 459px 266px, #ffffff 70%, rgba(0, 0, 0, 0)),
          radial-gradient(4px 4px at 174px 475px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 547px 271px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 550px 104px, rgba(255, 255, 255, 0.6) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(4px 4px at 352px 470px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 524px 427px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 125px 252px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(4px 4px at 393px 47px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 279px 390px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 93px 471px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(5px 5px at 386px 474px, #ffffff 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 456px 333px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 273px 74px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(5px 5px at 170px 264px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 244px 305px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 436px 178px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(3px 3px at 74px 89px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 541px 405px, #ffffff 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 442px 129px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(3px 3px at 349px 408px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 60px 561px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 226px 117px, #ffffff 70%, rgba(0, 0, 0, 0)),
          radial-gradient(5px 5px at 180px 102px, #ffffff 70%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 109px 225px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 158px 139px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(3px 3px at 419px 243px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 468px 131px, #ffffff 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 59px 15px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(4px 4px at 95px 79px, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 181px 398px, #ffffff 70%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 78px 216px, rgba(255, 255, 255, 0.8) 70%, rgba(0, 0, 0, 0)),
          radial-gradient(3px 3px at 480px 590px, rgba(255, 255, 255, 0.7) 70%, rgba(0, 0, 0, 0));
        background-size: 600px 600px;
        animation: snow 4s linear infinite;
        content: "";
      }

      .snow:after {
        margin-left: -200px;
        opacity: 0.4;
        animation-duration: 8s;
        animation-direction: reverse;
        filter: blur(3px);
      }

      .snow:before {
        animation-duration: 12s;
        animation-direction: reverse;
        margin-left: -300px;
        opacity: 0.65;
        filter: blur(1.5px);
      }

      @keyframes snow {
        to {
          transform: translateY(600px);
        }
      }

      @keyframes blink {
        20% {
          background: #eb8888;
        }
      }

      @keyframes blink2 {
        60% {
          background: white;
        }
      }

      @keyframes blink3 {
        75% {
          background: #d9c6ff;
        }
      }

      @keyframes blink4 {
        100% {
          background: #a7e7ff;
        }
      }

      @keyframes santa-claus {
        0%,
        60%,
        80%,
        100% {
          transform: rotateZ(195deg) translateY(0);
        }

        30% {
          transform: rotateZ(195deg) translateY(300px);
        }
      }

      @keyframes swing {
        0%,
        100% {
          transform: rotateZ(-42deg);
        }

        50% {
          transform: rotateZ(0deg);
        }
      }

      @keyframes balloon {
        0%,
        50%,
        100% {
          opacity: 0;
          transform: translateY(0px);
        }

        80%,
        90% {
          opacity: 1;
          transform: translateY(-15px);
        }
      }

      /* --- */

      #Snake {
        width: 600px;
        margin: 0 auto;
        padding: 20px;
        background-color: rgb(0, 0, 0);
      }

      .container {
        width: 100%;
        height: 100%;
        padding: 20px;
      }

      .wrapper {
        width: 500px;
        height: 500px;
        position: relative;

        background-color: white;
        transform-style: 3d;
        perspective: 800;
      }

      .block-container {
        width: 20px;
        height: 20px;
        float: left;
        transition: 0.5s linear;
        border: 1px solid rgba(194, 194, 194, 0.466);
        color: rgba(0, 0, 0, 0.342);
        background-color: rgba(0, 0, 0, 0);
        z-index: 1;
      }

      .rotate {
        animation-name: blockContainerRotate;
        animation-duration: 1s;
      }

      @keyframes blockContainerRotate {
        0% {
          transform: rotate(0);
        }

        100% {
          transform: rotate(540deg);
        }
      }

      .block {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(rgba(255, 99, 71, 0.514), tomato);
        left: 0;
        top: 0;
      }

      .header {
        position: relative;
        width: 500px;
        height: 160px;
        background-color: #fff;
        border-bottom: 2px dashed black;
        display: flex;
        /* background-image: linear-gradient(rgba(255, 99, 71, 0.514), tomato); */
      }

      .title {
        font-family: "Courier New", Courier, monospace;
        font-size: 30px;
        opacity: 0.2;
        left: 100px;
        bottom: 20px;
        position: absolute;
        z-index: 1;
      }

      .left-wrapper {
        flex: 3;
        background-color: white;
        padding: 10px;
        margin-right: 5px;
        /* background-image: linear-gradient(rgba(252, 186, 99, 0.514), rgb(255, 71, 71)); */
      }

      .right-wrapper {
        flex: 1;
        background-image: linear-gradient(rgba(252, 249, 99, 0.514), rgb(255, 237, 71));

        border-left: 2px dashed rgb(0, 0, 0);
      }

      button {
        box-sizing: border-box;
        margin: 10px 0;
        /* display: in-line; */
        width: 60px;
        height: 30px;
        border-radius: 3px;
        color: white;
        font-size: 22px;
        font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
        outline: none;
        background-color: rgba(0, 236, 253, 0.527);
        border: 2px solid rgb(255, 255, 255);
        cursor: pointer;
        z-index: 1;
      }

      button:hover {
        background-color: rgba(0, 236, 253, 0.37);
        color: rgba(255, 99, 71, 0.658);
      }

      button:active {
        background-color: rgba(0, 236, 253, 0.37);
        color: rgb(255, 99, 71);
      }

      button.active {
        background-color: rgba(0, 236, 253, 0.37);
        color: rgb(255, 99, 71);
      }

      .pause-btn {
        background: rgb(248, 202, 117);
        color: rgba(255, 255, 255, 0.822);
      }

      .pause-btn:hover {
        background-color: orange;
        color: rgba(255, 255, 255, 0.87);
      }

      .pause-btn:active {
        color: white;
      }

      .resume-btn {
        width: 75px;
      }

      .row-1,
      .row-2,
      .row-3,
      .row-4 {
        height: 30px;
      }

      .row-3 button {
        width: 135px;
      }

      .row-4 button {
        width: 165px;
      }

      .fr {
        float: right;
      }

      .score-wrapper {
        text-align: center;
      }

      .score-wrapper .label {
        margin: 20px 2px 10px 0px;
        font-size: 22px;
        font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
        font-style: Italic;
      }

      .score {
        display: inline-block;
        margin-left: 5px;
        font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
        background-image: linear-gradient(rgba(255, 99, 71, 0.514), tomato);
        line-height: 75px;
        width: 80px;
        height: 80px;
        box-sizing: border-box;
        border: 3px solid rgb(255, 255, 255);
        border-radius: 50%;
        cursor: pointer;
      }

      .score:hover {
        background-image: linear-gradient(rgba(255, 99, 71, 0.514), tomato);
        color: white;
      }
    </style>
  </head>

  <body>
    <div id="Snake">
      <div class="container">
        <div class="header">
          <div class="left-wrapper">
            <div class="row-1">
              <button class="start-btn">START</button>
              <button class="resume-btn">RESUME</button>
              <button class="pause-btn" style="float: right">PAUSE</button>
            </div>
            <div class="row-2">
              <button class="speed-btn">SPEED</button>
              <button class="speed-2-btn">X2</button>
              <button class="speed-4-btn">X4</button>
              <button class="speed-8-btn">X8</button>
            </div>

            <div class="row-3">
              <button class="change-color-btn">CHANGE COLOR</button>
            </div>
            <div class="row-4">
              <button class="change-surprise-btn">CHANGE SURPRISE</button>
            </div>
          </div>
          <div class="right-wrapper">
            <div class="score-wrapper">
              <div class="label">SCORE</div>
              <div class="score">0</div>
            </div>
          </div>
        </div>
        <ul class="wrapper">
          <div class="xm-wrapper">
            <h2 class="holidays-title">Happy Holidays!</h2>
            <div class="scene">
              <!-- <div class="xmas-tree">
              <div class="tree-star">
              </div>
              <div class="tree-leaves">
                <div class="tree-part">
                  <div class="tree-lights left">
                    <div class="light-bulb red"></div>
                    <div class="light-bulb yew"></div>
                    <div class="light-bulb purple"></div>
                    <div class="light-bulb blue"></div>
                  </div>
                  <div class="tree-lights right">
                    <div class="light-bulb red"></div>
                    <div class="light-bulb yew"></div>
                    <div class="light-bulb purple"></div>
                    <div class="light-bulb blue"></div>
                  </div>
                </div>
                <div class="tree-part">
                  <div class="tree-lights left">
                    <div class="light-bulb red"></div>
                    <div class="light-bulb yew"></div>
                    <div class="light-bulb purple"></div>
                    <div class="light-bulb blue"></div>
                  </div>
                  <div class="tree-lights right">
                    <div class="light-bulb red"></div>
                    <div class="light-bulb yew"></div>
                    <div class="light-bulb purple"></div>
                    <div class="light-bulb blue"></div>
                  </div>
                </div>
                <div class="tree-part">
                  <div class="tree-lights left">
                    <div class="light-bulb red"></div>
                    <div class="light-bulb yew"></div>
                    <div class="light-bulb purple"></div>
                    <div class="light-bulb blue"></div>
                  </div>
                  <div class="tree-lights right">
                    <div class="light-bulb red"></div>
                    <div class="light-bulb yew"></div>
                    <div class="light-bulb purple"></div>
                    <div class="light-bulb blue"></div>
                  </div>
                </div>
              </div>
              <div class="tree-base">
                <div class="tree-stalk"></div>
                <div class="tree-jar"></div>
              </div>
            </div> -->
              <div class="room-window">
                <div class="xmas-sky">
                  <div class="snow"></div>
                  <div class="snow-ground"></div>
                  <div class="santa-claus">
                    <div class="sc-head">
                      <div class="sc-hat">
                        <div class="hat-tip"></div>
                      </div>
                      <div class="eyes"></div>
                      <div class="nose"></div>
                      <div class="beard"></div>
                      <div class="ears">
                        <div class="ear left"></div>
                        <div class="ear right"></div>
                      </div>
                    </div>
                    <div class="sc-body"></div>
                  </div>
                </div>
              </div>
              <div class="xmas-gifts">
                <div class="xmas-gift square">
                  <div class="tie-wrap">
                    <div class="tie"></div>
                    <div class="tie reflected"></div>
                  </div>
                </div>
                <div class="xmas-gift rectangular">
                  <div class="tie-wrap">
                    <div class="tie"></div>
                    <div class="tie reflected"></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- <div class="ground"></div> -->
          </div>
          <div class="title">Gluttonous Snake</div>
          <!-- <li class="block-container" key="0"><div class="block"></div></li> -->
        </ul>
      </div>
    </div>

    <script>
      const snake = document.querySelector("#Snake");
      const container = snake.querySelector(".container");
      const wrapper = container.querySelector(".wrapper");
      const controlPad = container.querySelector(".left-wrapper");
      const score = container.querySelector(".score");
      const christmasWrapper = container.querySelector(".xm-wrapper");

      let colorMap = {
        0: "#FFB6C1",
        1: "#FFC0CB",
        2: "#DC143C",
        3: "#FF1493",
        4: "#87CEFA",
        5: "#F0FFFF",
        6: "#FF7F50",
        7: "#FA8072",
        8: "#FF4500",
      };

      let blockContainer;
      let blockMap = [];
      let direction = "left";
      let firstSnakeMemberIndex;
      let breakPoints = [];
      let count = 0;
      let timmer = null;
      let baseSpeed = 1000;
      let currentSpeed = 3000;
      let isInit = false;
      let isPending = false;
      let isReleasingEffect = false;
      let snakeBlockBackground = generateSnakeBackgroundColor();

      const init = () => {
        generateBlockContainer();
        setBlockMap();
        generateSnake();
        generateBlock();
        handleKeyboardEvent();
        handleControlPadEvent();
        handleControlPadButtonState({
          isEnding: true,
        });
      };

      function handleKeyboardEvent() {
        document.addEventListener("keydown", (e) => {
          if (isPending) return;

          switch (e.keyCode) {
            case 37: // 左
              isPending = true;
              if (["left", "right"].includes(direction)) return;
              direction = "left";
              break;
            case 38: // 上
              isPending = true;
              if (["top", "down"].includes(direction)) return;
              direction = "top";
              break;
            case 39: // 右
              isPending = true;
              if (["left", "right"].includes(direction)) return;
              direction = "right";
              break;
            case 40: // 下
              isPending = true;
              if (["top", "down"].includes(direction)) return;
              direction = "down";
              break;
            case 32:
              if (timmer) {
                clearInter();
                handleControlPadButtonState({
                  isRunning: false,
                  isPaused: true,
                });
              } else {
                let resumeBtn = container.querySelector(".resume-btn");
                console.log(resumeBtn.style.display);
                showSnake();
                if (resumeBtn.style.display != "none") {
                  handleSnakeMoving(currentSpeed);
                  handleControlPadButtonState({
                    isRunning: true,
                    isPaused: false,
                  });
                  return;
                }

                if (isInit) {
                  direction = "left";
                  Array.prototype.forEach.call(blockContainer, (el, idx) => {
                    el.children[0] && el.removeChild(el.children[0]);
                  });
                  generateSnake();
                  generateBlock();
                }

                handleSnakeMoving(currentSpeed);
                handleControlPadButtonState({
                  isRunning: true,
                  isPaused: false,
                });
                !isInit && (isInit = true);
                score.innerText = 0;
              }
              break;
          }
          console.log(direction);
          collectBreakPoints();
        });
      }

      function collectBreakPoints() {
        breakPoints.push({
          index: getSnakeTeam()[0].index,
          direction,
        });
        breakPoints = breakPoints.filter((breakPoint) => {
          return getSnakeTeam()
            .map((member) => member.index)
            .includes(breakPoint.index);
        });
      }

      function generateBlockContainer() {
        for (let i = 0; i < 625; i++) {
          let _blockContainer = document.createElement("div");

          _blockContainer.classList.add("block-container");
          wrapper.appendChild(_blockContainer);
        }
        blockContainer = wrapper.getElementsByClassName("block-container");
        Array.prototype.map
          .call(blockContainer, (el, elIndex) => {
            return [el, el.offsetLeft, el.offsetTop];
          })
          .forEach(([el, offsetLeft, offsetTop], index) => {
            el.style.position = "absolute";
            el.style.left = offsetLeft + "px";
            el.style.top = offsetTop + "px";
            el.index = index;
            // el.innerText = index;
            // el.style.fontSize = "10px";
            // el.onclick = (el) => {
            //   el.target.style.background === "yellow" ? (el.target.style.background = "white") : (el.target.style.background = "yellow");
            // };
            if (offsetLeft != 480) {
              el.style.borderRight = "none";
            }
            if (offsetTop != 480) {
              el.style.borderBottom = "none";
            }
          });
      }

      function setBlockMap() {
        let _blockContainerIndexes = Array.prototype.map.call(blockContainer, (el, idx) => idx);
        blockMap = arrTrans(25, _blockContainerIndexes);
      }

      function appendBlockByIndex(index, block) {
        blockContainer[index].appendChild(block);
      }

      function removeBlockByIndex(index) {
        blockContainer[index].removeChild(blockContainer[index].children[0]);
      }

      function getIndexByRoundLimit(roundX = -5, roundY = -5) {
        let xLists = [Math.abs(roundX) * 20, 500 - Math.abs(roundX) * 20];
        let yLists = [Math.abs(roundY) * 20, 500 - Math.abs(roundY) * 20];
        let index = [];
        Array.prototype.forEach.call(blockContainer, (el) => {
          if (el.offsetLeft > xLists[0] && el.offsetLeft < xLists[1] && el.offsetTop > yLists[0] && el.offsetTop < yLists[1]) {
            index.push(el.index);
          }
        });
        return index;
      }

      function generateSnake() {
        let randomIndex = randomGenerate(getIndexByRoundLimit());

        let snakes = [randomIndex, randomIndex + 1, randomIndex + 2, randomIndex + 3, randomIndex + 4];
        snakes.forEach((idx) => {
          let block = document.createElement("div");
          block.classList.add("block");
          block.setAttribute("teamMember", true);
          block.setAttribute("count", count);
          block.setAttribute("direction", direction);
          block.style.backgroundImage = `linear-gradient(${snakeBlockBackground[0]}, ${snakeBlockBackground[1]})`;
          count++;
          blockContainer[idx].appendChild(block);
        });
        firstSnakeMemberIndex = getSnakeTeam()[0].index;
      }

      function getSnakeTeam() {
        let members = [];
        Array.prototype.forEach.call(blockContainer, (el, elIndex) => {
          if (el.children[0] && el.children[0].className == "block" && el.children[0].getAttribute("teamMember")) {
            members.push({
              el: el.children[0],
              index: elIndex,
            });
          }
        });
        return members.sort((a, b) => a.el.getAttribute("count") - b.el.getAttribute("count"));
      }

      function handleSnakeMoving(speed = baseSpeed) {
        if (isPending) return;
        clearInter();
        moveAction(speed);
      }

      let outdoorFood = {
        idx: 0,
        el: null,
      };

      function moveAction(speed) {
        isPending = true;
        timmer = setInterval(() => {
          let newGroups = [];
          snakeMembers = [...getSnakeTeam()];
          // console.log("snakeMembers", snakeMembers);
          try {
            snakeMembers.forEach((member, memberPlace) => {
              let memberIndex = member.index;
              let memberEl = member.el;
              let newMemberEl = blockContainer[memberIndex].children[0].cloneNode(true);

              let [ifBreakPointResult] = breakPoints.filter((breakpoint) => breakpoint.index == memberIndex);

              if (ifBreakPointResult) {
                currentMemberDirection = ifBreakPointResult.direction;
                newMemberEl.setAttribute("direction", currentMemberDirection);
              } else {
                currentMemberDirection = memberEl.getAttribute("direction");
              }

              let canMoveIndexes = getCanMoveIdx(memberIndex, currentMemberDirection);
              if (memberPlace == 0 && snakeMembers.map((member) => member.index).includes(canMoveIndexes[0])) throw Error("can not move anymore");

              if (canMoveIndexes.length == 0) throw Error("can not move anymore");

              removeBlockByIndex(memberIndex);
              newGroups.push({
                idx: canMoveIndexes[0],
                el: newMemberEl,
              });
            });

            let food;
            console.log("-->", outdoorFood);
            newGroups.forEach((item, place, _newGroups) => {
              if (blockContainer[item.idx].children[0] && place == 0) {
                food = blockContainer[item.idx].children[0].cloneNode();
                removeBlockByIndex(item.idx);
              }
              if (food && place == _newGroups.length - 1) {
                let lastMemberDirection = item.el.getAttribute("direction");
                appendBlockByIndex(item.idx, item.el);

                let [ifBreakPointResult] = breakPoints.filter((breakpoint) => breakpoint.index == item.idx);

                if (ifBreakPointResult) {
                  currentMemberDirection = ifBreakPointResult.direction;
                  food.setAttribute("direction", currentMemberDirection);
                } else {
                  currentMemberDirection = lastMemberDirection;
                }
                const reDirectionMap = {
                  left: "right",
                  right: "left",
                  top: "down",
                  down: "top",
                };

                appendBlockByIndex(item.idx, item.el);
                food.setAttribute("direction", currentMemberDirection);
                food.setAttribute("teamMember", true);
                food.setAttribute("count", count++);
                let foodIndex = getCanMoveIdx(item.idx, reDirectionMap[currentMemberDirection])[0];
                if (foodIndex === undefined) {
                  console.log("foodIndex", foodIndex);
                  outdoorFood.el = food;
                  outdoorFood.idx = item.idx;

                  food = null;
                  generateBlock();
                  console.log("----", outdoorFood);

                  return;
                }
                console.log("foodIndex", foodIndex);
                blockContainer[foodIndex].appendChild(food);
                appendBlockByIndex(foodIndex, food);

                food = null;
                generateBlock();

                return;
              }

              appendBlockByIndex(item.idx, item.el);
            });

            if (outdoorFood.el) {
              appendBlockByIndex(outdoorFood.idx, outdoorFood.el);
              outdoorFood.el = null;
            }

            changeScore();
            isPending = false;
          } catch (e) {
            console.log(e);
            handleEndOfTheGame();
            clearInter();
            isPending = false;
          }
        }, speed);
      }

      function getCanMoveIdx(index = 409, direction = "left") {
        let indexes = [];
        let _blockMap;
        switch (direction) {
          case "left":
            _blockMap = blockMap.map((item) => [...item]);
            _blockMap.forEach((row) => {
              if (row.includes(index)) {
                indexes = row.filter((col) => col < index);
              }
            });
            indexes.sort((a, b) => b - a);
            break;
          case "right":
            _blockMap = blockMap.map((item) => [...item]);
            _blockMap.forEach((row) => {
              if (row.includes(index)) {
                indexes = row.filter((col) => col > index);
              }
            });

            break;
          case "top":
            _blockMap = matrixTransform(blockMap.map((item) => [...item]));
            _blockMap.forEach((row) => {
              if (row.includes(index)) {
                indexes = row.filter((col) => col < index);
              }
            });
            indexes.sort((a, b) => b - a);
            break;
          case "down":
            _blockMap = matrixTransform(blockMap.map((item) => [...item]));
            _blockMap.forEach((row) => {
              if (row.includes(index)) {
                indexes = row.filter((col) => col > index);
              }
            });

            break;
          default:
            break;
        }
        // console.log("可移动的索引", indexes);
        return indexes;
      }

      function generateBlock() {
        changeSnakeBlockBackground();
        let block = document.createElement("div");
        block.classList.add("block");
        block.style.backgroundImage = `linear-gradient(${snakeBlockBackground[0]}, ${snakeBlockBackground[1]})`;

        let usefulIndexList = Array.prototype.filter.call(blockContainer, (el, idx) => !el.children[0]).map((item) => item.index);

        let usedIndexList = Array.prototype.filter.call(blockContainer, (el, idx) => el.children[0]).map((item) => item.index);

        let randomIndex = randomGenerate(usefulIndexList, usedIndexList);

        blockContainer[randomIndex].appendChild(block);
      }

      function changeScore() {
        let scoreVal = 0;
        getSnakeTeam().forEach((el, index) => {
          // console.log(index);
          if (index > 4 && index <= 10) {
            scoreVal += 100;
          }
          if (index > 10 && index <= 20) {
            scoreVal += 200;
          }
          if (index > 20 && index <= 40) {
            scoreVal += 350;
          }
          if (index > 40 && index <= 60) {
            scoreVal += 500;
          }
          if (index > 60 && index <= 70) {
            scoreVal += 700;
          }
          if (index > 70 && index <= 80) {
            scoreVal += 800;
          }
          if (index > 80 && index <= 90) {
            scoreVal += 1000;
          }
          if (index > 90) {
            scoreVal += 1200;
          }
        });
        score.innerText = scoreVal;
        score.style.backgroundImage = `linear-gradient(${snakeBlockBackground[0]}, ${snakeBlockBackground[1]})`;
      }

      function handleControlPadEvent() {
        controlPad.addEventListener("click", (e) => {
          const className = e.target.className;
          switch (className) {
            case "start-btn":
              showSnake();
              if (isInit) {
                direction = "left";
                Array.prototype.forEach.call(blockContainer, (el, idx) => {
                  el.children[0] && el.removeChild(el.children[0]);
                });
                generateSnake();
                generateBlock();
              }

              handleSnakeMoving(currentSpeed);
              handleControlPadButtonState({
                isRunning: true,
                isPaused: false,
              });
              !isInit && (isInit = true);
              score.innerText = 0;
              break;
            case "resume-btn":
              handleSnakeMoving(currentSpeed);
              handleControlPadButtonState({
                isRunning: true,
                isPaused: false,
              });
              break;
            case "pause-btn":
              clearInter();
              handleControlPadButtonState({
                isRunning: false,
                isPaused: true,
              });
              break;
            case "speed-btn":
              isPending = false;
              if (!isInit) return;
              if (currentSpeed == baseSpeed) {
                currentSpeed = baseSpeed / 2;
                handleSnakeMoving(currentSpeed);
                handleSpeedButtonState("speed2");
              } else if (currentSpeed == baseSpeed / 2) {
                currentSpeed = baseSpeed / 4;
                handleSnakeMoving(currentSpeed);
                handleSpeedButtonState("speed4");
              } else if (currentSpeed == baseSpeed / 4) {
                currentSpeed = baseSpeed / 8;
                handleSnakeMoving(currentSpeed);
                handleSpeedButtonState("speed8");
              } else {
                currentSpeed = baseSpeed;
                handleSnakeMoving(currentSpeed);
                handleSpeedButtonState(null);
              }

              break;
            case "speed-2-btn":
              isPending = false;
              currentSpeed = baseSpeed / 2;
              handleSpeedButtonState("speed2");
              if (!isInit) return;
              handleSnakeMoving(currentSpeed);

              break;
            case "speed-4-btn":
              isPending = false;
              currentSpeed = baseSpeed / 4;
              handleSpeedButtonState("speed4");
              if (!isInit) return;
              handleSnakeMoving(currentSpeed);

              break;
            case "speed-8-btn":
              isPending = false;
              currentSpeed = baseSpeed / 8;
              handleSpeedButtonState("speed8");
              if (!isInit) return;
              handleSnakeMoving(currentSpeed);
              break;

            case "change-color-btn":
              changeSnakeBlockBackground();
              break;
            case "change-surprise-btn":
              handleSurprise(randomGenerate(["roundCircle", "iLoveU", "wallPaper", "christmas"]));
              // handleSurprise(randomGenerate(["wallPaper"]));
              break;
            default:
              break;
          }
        });
      }

      function handleSpeedButtonState(name) {
        let btns = {
          speed2: controlPad.querySelector(".speed-2-btn"),
          speed4: controlPad.querySelector(".speed-4-btn"),
          speed8: controlPad.querySelector(".speed-8-btn"),
        };
        if (!name) return clearActive();
        clearActive();
        btns[name].classList.add("active");

        function clearActive() {
          Array.prototype.forEach.call(Object.keys(btns), (_name) => {
            btns[_name].classList.remove("active");
          });
        }
      }

      function handleControlPadButtonState({ isRunning, isPaused, isEnding }) {
        let startBtn = controlPad.querySelector(".start-btn");
        let resumeBtn = controlPad.querySelector(".resume-btn");
        let pauseBtn = controlPad.querySelector(".pause-btn");

        if (isRunning && !isPaused) {
          startBtn.style.display = "none";
          pauseBtn.style.display = "inline-block";
        } else {
          pauseBtn.style.display = "none";
        }
        if (isEnding) {
          startBtn.style.display = "inline-block";
        }

        if (isPaused) {
          resumeBtn.style.display = "inline-block";
        } else {
          resumeBtn.style.display = "none";
        }
      }

      function handleEndOfTheGame() {
        console.log("end of the game");
        handleControlPadButtonState({
          isEnding: true,
        });
        Array.prototype.forEach.call(blockContainer, (el) => el.children[0] && el.removeChild(el.children[0]));
        handleSurprise(randomGenerate(["roundCircle", "iLoveU", "wallPaper", "christmas"]));
      }

      function handleSurprise(type, ...args) {
        // const clearBlock = () => {
        //   Array.prototype.forEach.call(blockContainer, (el) => (el.style.background = "white"));
        // };
        // clearBlock()
        if (isReleasingEffect) return;
        return {
          roundCircle: async () => {
            isReleasingEffect = true;
            cleanBoard();

            let _blockMap = blockMap.map((item) => [...item]);
            let arr = spiralOrder(_blockMap);
            let lg = arr.length;

            for (let i = 0; i < lg; i++) {
              await sleep(10);
              blockContainer[arr[i]].style.background = randomGenerate(Object.values(colorMap));
              blockContainer[arr[i]].classList.add("rotate");
              blockContainer[arr[i]].style.opacity = (1.2 * i) / 625;
            }
            clearBlockBorders();
            isReleasingEffect = false;
          },
          heart: () => {},
          iLoveU: async () => {
            isReleasingEffect = true;
            cleanBoard();

            let text = {
              i: [76, 77, 78, 79, 80, 103, 128, 153, 178, 203, 228, 251, 252, 253, 254, 255],
              love: [[84, 88], [108, 109, 110, 112, 113, 114], [132, 133, 134, 135, 136, 137, 138, 139, 140], [157, 158, 159, 160, 161, 162, 163, 164, 165], [183, 184, 185, 186, 187, 188, 189], [209, 210, 211, 212, 213], [235, 236, 237], [261]],
              u: [[92, 117, 142, 167, 192, 217, 218, 243, 244, 270, 246, 247, 222, 223, 198, 173, 148, 123, 98]],
              surfix: [326, 302, 328, 304, 330, 306, 332, 308, 334, 310, 336, 312, 338, 314, 340, 316, 342, 318, 344, 320, 346, 322, 348],
            };
            let textArr = [...text.i, ...text.love, ...text.u, ...text.surfix];
            for (let i = 0; i < textArr.length; i++) {
              const item = textArr[i];
              await sleep(100);
              if (!Array.isArray(item)) {
                blockContainer[item].style.background = "#FF1493";
              } else {
                for (let j = 0; j < item.length; j++) {
                  const num = item[j];
                  blockContainer[num].style.background = "#FF1493";
                }
              }
            }
            isReleasingEffect = false;
          },
          wallPaper: async () => {
            isReleasingEffect = true;
            cleanBoard();
            Array.prototype.forEach.call(blockContainer, (el) => {
              el.style.background = "white";
            });
            await sleep(500);
            // const paperNames = ["001", "002", "003", "004", "005", "006"];
            const paperNames = ["003",  "006"];
            wrapper.style.background = `url(./imgs/${randomGenerate(paperNames)}.jpg)  0 0 transparent`;

            wrapper.style.backgroundSize = "100% 100%";
            for (let i = 0; i < blockContainer.length; i++) {
              const item = blockContainer[i];
              await sleep(20);
              item.style.background = "rgba(0, 0, 0, 0)";
            }
            clearBlockBorders();
            isReleasingEffect = false;
          },
          christmas: () => {
            cleanBoard();
            christmasWrapper.style.display = "block";
          },
        }[type](args);
      }

      init();

      function clearInter() {
        timmer && window.clearInterval(timmer);
        timmer = null;
      }

      function cleanBoard() {
        Array.prototype.forEach.call(blockContainer, (el) => {
          el.style.background = "rgba(0, 0, 0, 0)";
          el.style.border = "1px solid rgba(194, 194, 194, 0.466)";
          if (el.offsetLeft != 480) {
            el.style.borderRight = "none";
          }
          if (el.offsetTop != 480) {
            el.style.borderBottom = "none";
          }
          if (el.children[0]) {
            el.children[0].style.opacity = 0;
          }
        });
        christmasWrapper.style.display = "none";
      }

      function showSnake() {
        Array.prototype.forEach.call(blockContainer, (el) => {
          if (el.children[0]) {
            el.children[0].style.opacity = 1;
          }
        });
      }

      function addBlockBorders() {
        Array.prototype.forEach.call(blockContainer, (el) => {
          el.style.border = "1px solid rgba(194, 194, 194, 0.466)";
          if (el.offsetLeft != 480) {
            el.style.borderRight = "none";
          }
          if (el.offsetTop != 480) {
            el.style.borderBottom = "none";
          }
        });
      }

      function clearBlockBorders() {
        Array.prototype.forEach.call(blockContainer, (el) => {
          el.style.border = "none";
        });
      }

      function changeSnakeBlockBackground() {
        snakeBlockBackground = generateSnakeBackgroundColor();
        changeSnakeBackground();
      }

      function changeSnakeBackground() {
        let members = getSnakeTeam();
        members.forEach((mem) => {
          mem.el.style.backgroundImage = `linear-gradient(${snakeBlockBackground[0]}, ${snakeBlockBackground[1]})`;
        });
      }

      function generateSnakeBackgroundColor() {
        return [randomGenerate(Object.values(colorMap)), randomGenerate(Object.values(colorMap))];
      }

      function randomNum(n) {
        return Math.floor(Math.random() * Math.floor(n));
      }

      function randomGenerate(arr, effectedItems) {
        if (effectedItems && effectedItems.length > 0) {
          let newArr = arr.filter((item) => !effectedItems.includes(item));
          if (newArr > 0) {
            return newArr[Math.floor(Math.random() * newArr.length)];
          } else {
            return arr[Math.floor(Math.random() * arr.length)];
          }
        } else {
          return arr[Math.floor(Math.random() * arr.length)];
        }
      }

      function arrTrans(num, arr) {
        // 一维数组转换为二维数组
        const iconsArr = []; // 声明数组
        arr.forEach((item, index) => {
          const page = Math.floor(index / num); // 计算该元素为第几个素组内
          if (!iconsArr[page]) {
            // 判断是否存在
            iconsArr[page] = [];
          }
          iconsArr[page].push(item);
        });
        return iconsArr;
      }

      function sleep(ms) {
        return new Promise((resolve, reject) => setTimeout(resolve, ms));
      }

      function matrixTransform(arr) {
        return arr[0].map(function(col, i) {
          return arr.map(function(row) {
            return row[i];
          });
        });
      }

      function spiralOrder(matrix) {
        if (!matrix.length || !matrix[0].length) {
          return [];
        }

        const rows = matrix.length,
          columns = matrix[0].length;
        const order = [];
        let left = 0,
          right = columns - 1,
          top = 0,
          bottom = rows - 1;
        while (left <= right && top <= bottom) {
          for (let column = left; column <= right; column++) {
            order.push(matrix[top][column]);
          }
          for (let row = top + 1; row <= bottom; row++) {
            order.push(matrix[row][right]);
          }
          if (left < right && top < bottom) {
            for (let column = right - 1; column > left; column--) {
              order.push(matrix[bottom][column]);
            }
            for (let row = bottom; row > top; row--) {
              order.push(matrix[row][left]);
            }
          }
          [left, right, top, bottom] = [left + 1, right - 1, top + 1, bottom - 1];
        }
        return order;
      }

      function rgb() {
        //rgb颜色随机
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 120);
        var b = Math.floor(Math.random() * 256);
        var rgb = "(" + r + "," + g + "," + b + ",0.8" + ")";
        return rgb;
      }
    </script>
  </body>
</html>
